import React, { Component } from 'react'
import { connect } from 'react-redux'
import actionCreator from '@/store/actionCreator'
import { supportReq } from '@/utils/request'
import { ALLBLOGCHANGE } from '@/store/actionType'
import { Skeleton, List, Avatar } from 'antd';
// import * as ReactMarkdown from 'react-markdown'
// import reqwest from 'reqwest';

import {
  // StarOutlined, //收藏没做
  LikeOutlined, MessageOutlined
} from '@ant-design/icons';

const mapStateToProps = (state, ownProps) => {
  return {
    list: state.getIn(['blog', 'allArticles']).filter(item => item.isPub),
    email: state.getIn(['user', 'obj', 'email'])
  }
}
const mapDispatchToProps = {
  // promise中间件
  getAllArticle: actionCreator.getAllArticle,
  getSupport: (data) => {
    return supportReq(data).then(res => {
      const payload = res.result && res.result.length > 0 ? res.result : []
      return {
        type: ALLBLOGCHANGE,
        payload
      }
    })
  },
  setBreadList: actionCreator.setBreadList
}
@connect(mapStateToProps, mapDispatchToProps)
class All extends Component {
  constructor(props) {
    super(props)
    this.state = {
      loading: true,
      initLoading: true,
      supportObj: { color: '#ffd700' }
    }
  }
  componentDidMount() {
    this.props.setBreadList(['博客', '所有'])
    this.props.getAllArticle().finally(() => {
      this.setState({ loading: false, initLoading: false, });
    })
  }

  render() {
    const { loading, initLoading, supportObj } = this.state;
    const { list, email } = this.props
    return (
      <div>
        <List
          className="demo-loadmore-list"
          // style={{ minHeight: '350px' }}
          size="small"
          loading={initLoading}
          itemLayout="vertical"
          // loadMore={loadMore}
          dataSource={list}
          renderItem={item => (

            <List.Item
              key={item._id}
              // 底部
              actions={
                !loading && [
                  // <IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,
                  <Avatar key="avatar" src={item.avatar || '/topaz-blog/qq.jpg'} />,
                  <span key="author">{item.author}</span>,
                  <span onClick={() => this.supportFunc(item._id, item.praisePoints)} key="list-vertical-like-o" style={{ userSelect: 'none' }}><LikeOutlined style={item.praisePoints.includes(email) ? supportObj : {}} />&nbsp;{item.praisePoints.length}</span>,
                  <span key="list-vertical-message"><MessageOutlined />&nbsp;{item.commentNum.length}</span>
                ]
              }
              // 右侧
              extra={
                !loading && (
                  <img
                    onClick={() => this.goDetails(item._id)}
                    height={100}
                    alt="logo"
                    src={item.logo || "https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"}
                  />
                )
              }
            >
              {/* // 骨架屏占位 */}
              <Skeleton loading={loading} active avatar>
                <List.Item.Meta
                  onClick={() => this.goDetails(item._id)}
                  // avatar
                  title={item.title}
                  description={item.text.substr(0, 40)}
                />
                {/* {item.text.substr(0, 40)} */}
              </Skeleton>
            </List.Item>
          )}
        />
      </div>
    )
  }
  // 去详情
  goDetails = (id) => {
    this.props.history.push('/blog/details/' + id)
  }
  // 点赞
  supportFunc = (id, praisePoints) => {
    const token = sessionStorage.getItem('bloger')
    const { getSupport, email } = this.props
    if (token) {
      if (praisePoints.includes(email)) {//已点赞
        getSupport({ id, praisePoints: praisePoints.filter(item => item !== email) })
      } else {//未点赞
        getSupport({ id, praisePoints: [...praisePoints, email] })
      }
    }
  }
}

export default All
